<!DOCTYPE html>
<html style="font-size: 100px">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>
    <link rel="stylesheet" href="./css/base.css"/>
    <link rel="stylesheet" href="./css/index3.css"/>
    <link rel="stylesheet" href="./css/swiper.min.css"/>
    <title>有票</title>
</head>
<script src="./js/jquery-1.11.2.js"></script>
<script src='./js/template.js'></script>
<script type="text/template" id="module">
    <ul>
    {{each list}}
        <li>
            <a href="#">
                <div class="recom-list-left">
                    <img src="{{$value.url}}" alt=""/>
                </div>
                <div class="recom-list-right ">
                    <div class="right-top right-item">
                        <h3>{{$value.title}}</h3>
                    </div>
                    <div class="right-middle right-item">
                        <p>{{$value.date}}</p>
                        <p>{{$value.dress}}</p>
                    </div>
                    <div class="right-bottom right-item">
                        {{if $value.status == "false"}}
                        <span>预售中</span>
                        {{else }}
                        <span style="background-color:#01d529;">售票中</span>
                        {{/if}}
                        <span class="pirce"><i>¥</i>{{$value.price}}<i>起</i></span>
                    </div>
                </div>
            </a>
        </li>
    {{/each}}
    </ul>
</script>
<body>
<div class="yp-layout">
    <!--top-nav-->
    <header class="top-nav">
        <div class="yp-nav-box">
            <span class="top-area">
                <a href="#" class="aaa">
                    <div class="city">上海</div>
                    <div class="city-arrow"></div>
                </a>
            </span>

            <form action="#">
                <i class="icon-seach"></i>
                <input class="inp" type="search" value="请输入关键字"/>
            </form>

            <a href="#" class="icon-user"></a>
        </div>
    </header>
    <!--top-nav-end-->
    <div class="kong"></div>

    <!--banner-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <a href="#"><img src="./img/banner1.jpg" alt=""/></a>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./img/banner2.jpg" alt=""/></a>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./img/banner3.jpg" alt=""/></a>
            </div>
            <div class="swiper-slide">
                <a href="#"><img src="./img/banner4.jpg" alt=""/></a>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!--banner-->

    <!--cateBox -->
    <div class="cateBox">
        <ul class="cateList clearfix">
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate1"></i>

                    <p>抢手票</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate2"></i>

                    <p>折扣票</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate3"></i>

                    <p>演唱会</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate4"></i>

                    <p>音乐会</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate5"></i>

                    <p>话剧歌剧</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate6"></i>

                    <p>体育赛事</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate7"></i>

                    <p>儿童亲子</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="icon-cate icon-cate8"></i>

                    <p>全部项目</p>
                </a>
            </li>
        </ul>
    </div>

    <!--cateBox -->

    <!--ad-->
    <div class="ad clearfix">
        <div class="ad-left b_right">
            <a href="#"><img src="./img/wyt.png" alt=""/></a>
        </div>
        <div class="ad-right">
            <div class="ad-right-top b_bottom">
                <a href="#"><img src="./img/cyx.png" alt=""/></a>
            </div>
            <div class="ad-right-bottom">
                <div class="b_right">
                    <a href="#"><img src="./img/lwzj.png" alt=""/></a>
                </div>
                <div>
                    <a href="#"><img src="./img/zjst.png" alt=""/></a>
                </div>
            </div>
        </div>
    </div>

    <!--ad-->

    <!--Recommend-->

    <div class="recom">
        <a  class="recom-box" href="#">
            <div class="recom-top">热门推荐</div>
        </a>
        <div class='recom-list'>
            <!--template模板-->
        </div>
    </div>

    <!--Recommend-->
</div>
<script>
    window.onload = function () {
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, //无缝滚动
            autoplay: 3000,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            //当鼠标停留在banner上 自动播放停止
            autoplayDisableOnInteraction: false
        })

        window.onresize = function(){
            var size = 50;/*基准是320*/
            var width = window.innerWidth;
            /*根据当前的屏幕尺寸计算fontSize的值*/
            var fontSize = 50/320*width;
            /*动态设置字体大小*/
            document.querySelector('html').style.fontSize = fontSize + 'px';
        }
    }

    $(function () {
        $.ajax({
            url:"data.json",
            dataType: 'json',
            type: "GET",
            success: function (data) {
//                console.log(data);
                var $html = template('module',data)
//                console.log(data,$html)
                $('.recom-list').html($html);
            }
        })



    })
</script>
<script src="./js/swiper-3.3.1.min.js"></script>
</body>
</html>

